<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Reacting to Params Changes</title>
</head>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<body>
<div id="app">
<h1>Reacting to Params Changes</h1>
<p>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- `<router-link>` will be rendered as an `<a>` tag by default -->
    <router-link to="/user/foo">Go to Foo</router-link>
    <router-link to="/user/bar">Go to bar</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
</body>
<script>
    /**
     * Backgroud information:
     * One thing to note when using routes with params is that when the user navigates from /user/foo to /user/bar,
     * the same component instance will be reused. Since both routes render the same component,
     * this is more efficient than destroying the old instance and then creating a new one.
     * However, this also means that the lifecycle hooks of the component will not be called.
     *
     *
     * @type {{template: string, watch: {$route(*, *)}}}
     */

    // To react to params changes in the same component, you can simply watch the $route object
    const User = {
        template: '<div>User {{ $route.params.id }}</div>',
        watch: {
            '$route' (to, from) {
                // react to route changes...
                console.group('--to--')
                console.log(to)
                console.groupEnd()

                console.group('--from--')
                console.log(from)
                console.groupEnd()
            }
        }/*,
        beforeRouteUpdate (to, from, next) {
                // react to route changes...
                // don't forget to call next()
        }*/
    }

    const router = new VueRouter({
        routes: [
            // dynamic segments start with a colon
            { path: '/user/:id', component: User },
        ]
    })
    /**
     * Or, use the beforeRouteUpdate navigation guard introduced in 2.2:
     * const User = {
          template: '...',
          beforeRouteUpdate (to, from, next) {
            // react to route changes...
            // don't forget to call next()
          }
        }
     */
    const app = new Vue({
        router
    }).$mount('#app')

</script>
</html>